<template>
  <div class="select-dialog">
    <el-dialog
      title="选择企微号"
      :visible.sync="visible"
      width="42%"
      :before-close="onClose">
      <div class="select-talke-wrap">
        <div class="search-header">
          <el-input class="search-input" size="small" placeholder="输入关键词" suffix-icon="el-icon-search"  style="width: 200px;"/>
        </div>
        <div class="content">
          <div class="box-card-left box-card">
            <div slot="header" class="header">
              <el-checkbox v-model="checkedAll">全选本页</el-checkbox>
            </div>
            <div class="select-row-item">
              <div class="account-info">
                <el-checkbox />
                <img class="account-cover" src="@/assets/images/profile.jpg" />
                <div class="info">
                  <div class="account-name">肖成红</div>
                  <div class="account-desc">@志新</div>
                </div>
                <el-tag type="info">未分组</el-tag>
                <div class="account-status">
                  <span class="status-round sucess" />
                  <span class="status-text">在线</span>
                </div>
              </div>
              <!-- <div class="tips">分组将更换为未分组</div> -->
            </div>
            <div class="left-footer">
              <div>共<span style="color: rgb(48, 112, 255);margin: 0 4px;">5</span>个</div>
            </div>
          </div>
          <div class="box-card-right box-card">
            <div slot="header" class="header">
              <span>已选择</span>
              <el-button style="float: right; padding: 3px 0" type="text">清空</el-button>
            </div>
            <div class="card-right-list">
              <div class="card-list-item">
                <div>肖成红</div>
                <i class="el-icon-remove-outline"></i>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="onClose">取 消</el-button>
        <el-button type="primary" @click="onClose">确定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        group_name: ''
      }
    }
  },
  props: ['visible'],
  methods: {
    onClose() {
      this.$emit('onClose');
    }
  },
}
</script>
<style lang="scss" scoped>
.select-talke-wrap {
  .search-header {
    display: flex;
    align-items: center;
    padding: 12px;
  }
  .content {
    display: flex;
    align-items: center;
    .box-card {
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fafafa;
        border-bottom: 1px solid #e9e9e9;
        height: 48px;
        padding: 0 16px;
        z-index: 1;
        color: rgba(0, 0, 0, .85);
      }
    }
    .box-card-left {
      flex: 1 1;
      min-height: 500px;
      position: relative;
      border-right: 1px solid rgb(233, 233, 233);
      .select-row-item {
        height: 70px;
        padding: 8px 16px;
        cursor: pointer;
        position: relative;
        .account-info {
          display: flex;
          align-items: center;
          gap: 8px;
          overflow: hidden;
          .account-cover {
            width: 40px;
            height: 40px;
            border-radius: 4px;
          }
          .info {
            flex: 1 1 0%;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .account-name {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: rgb(34, 35, 51);
            }
            .account-desc {
              color: rgb(240, 139, 0);
              display: flex;
              align-items: center;
            }
          }
          .account-status {
            display: flex;
            align-items: center;
            margin-left: 8px;
            .status-round {
              position: relative;
              top: -1px;
              display: inline-block;
              width: 6px;
              height: 6px;
              vertical-align: middle;
              border-radius: 50%;
              &.sucess {
                background-color: rgb(19, 206, 102);
              }
            }
            .status-text {
              margin-left: 8px;
              color: rgba(0, 0, 0, 0.65);
              font-size: 14px;
            }
          }
        }
        .tips {
          position: absolute;
          bottom: 0px;
          right: 0px;
          line-height: 20px;
          background-color: rgb(233, 233, 233);
          padding: 0px 12px;
        }
      }
      .left-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 40px;
        padding: 0px 12px;
        border-top: 1px solid rgb(233, 233, 233);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        font-size: 14px;
      }
    }
    .box-card-right {
      width: 200px;
      min-height: 500px;
      .card-right-list {
        overflow-y: auto;
        padding: 12px;
        .card-list-item {
          padding: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: rgba(0, 0, 0, 0.85);
          font-size: 14px;
          line-height: 22px;
        }
      }
    }
  }
}
</style>
<style>
.select-dialog .el-dialog__body {
  padding: 0px;
  font-size: 14px;
}
</style>